<template>
  <ElTabs :key="activeName.key" v-model="activeName.nav" type="card">
    <ElTabPane label="常见病">
      <span slot="label" class="tab-item">常见病</span>
      <DiseasesHealth />
    </ElTabPane>
    <ElTabPane label="保健"><DiseasesHealth :type="'health'"/></ElTabPane>
    <ElTabPane label="特色项目"><SpecialItems /></ElTabPane>
    <ElTabPane label="产品"><Product /></ElTabPane>
    <ElTabPane label="理疗"><Physiotherapy /></ElTabPane>
  </ElTabs>
</template>

<script>
import {menusNavigation} from '@/store';
import DiseasesHealth from '@/components/project/DiseaseHealth.vue';
import SpecialItems from '@/components/project/SpecialItems.vue';
import Product from '@/components/project/Product.vue';
import Physiotherapy from '@/components/project/Physiotherapy.vue';

export default {
  name: 'Project',
  components: {
    DiseasesHealth,
    SpecialItems,
    Product,
    Physiotherapy
  },
  props: {
    activeName: {
      type: Object,
      default: () => ({
        nav: '0'
      })
    }
  },
  data() {
    return {
      menusNavigation
    };
  }
};
</script>

<style lang="scss">
@import '@/assets/css/util.scss';
.ProjectManage {
  .input {
    width: 80px;
    margin-right: 10px;
    input {
      text-align: center;
    }
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #4b90ff;
    color: #fff;
    .el-button {
      background-color: transparent;
      color: #fff;
      border-color: #fff;
    }
  }
  .el-table {
    &.noMembers {
      th {
        background-color: #fff;
      }
      padding-top: 20px;
    }
    th {
      background-color: #f3f4f6;
    }
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #f6f8fd;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped:hover td {
    background-color: #4b90ff;
  }
  @import '@/assets/css/tab.scss';
}
</style>
